<!DOCTYPE html>
<html lang="en">


<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- mobile status bar color -->
    <meta name="theme-color" content="#fff">
    <title>Sudoku</title>
    <link rel="shortcut icon" href="static/images/icon.jpg" type="image/x-icon">
    <!-- google font -->
    <link rel="preconnect" href="https://fonts.googleapis.com/">
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap" rel="stylesheet">
    <!-- box icons -->
    <link href='../../unpkg.com/boxicons%402.0.9/css/boxicons.min.css' rel='stylesheet'>
    <!-- app css -->
    <link rel="stylesheet" href="app.css">

</head>

<body>

    <!-- top nav -->
    <nav>
        <div class="nav-container">
            <a href="#" class="nav-logo">
                Sudoku
            </a>
            <div class="dark-mode-toggle" id="dark-mode-toggle">
                <i class="bx bxs-sun"></i>
                <i class="bx bxs-moon"></i>
            </div>
        </div>
    </nav>
    <!-- end top nav -->

    <!-- main -->
    <div class="main">
        <div class="screen">
            <!-- start screen -->
            <div class="start-screen active" id="start-screen">
                <input type="text" placeholder="Your name" maxlength="11" class="input-name" id="input-name">
                <div class="btn" id="btn-level">
                    Easy
                </div>
                <div class="btn" id="btn-continue">Continue</div>
                <div class="btn btn-blue" id="btn-play">New game</div>
            </div>
            <!-- end start screen -->

            <!-- game screen -->
            <div class="main-game" id="game-screen">
                <div class="main-sudoku-grid">
                    <!-- 81 cells -->
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                    <div class="main-grid-cell"></div>
                </div>

                <div class="main-game-info">
                    <div class="main-game-info-box main-game-info-name">
                        <span id="player-name">tuat</span>
                    </div>
                    <div class="main-game-info-box main-game-info-level">
                        <span id="game-level">Easy</span>
                    </div>
                </div>

                <div class="main-game-info-box main-game-info-time">
                    <span id="game-time">10:20</span>
                    <div class="pause-btn" id="btn-pause">
                        <i class="bx bx-pause"></i>
                    </div>
                </div>

                <div class="numbers">
                    <div class="number">1</div>
                    <div class="number">2</div>
                    <div class="number">3</div>
                    <div class="number">4</div>
                    <div class="number">5</div>
                    <div class="number">6</div>
                    <div class="number">7</div>
                    <div class="number">8</div>
                    <div class="number">9</div>
                    <div class="delete" id="btn-delete">X</div>
                </div>
            </div>
            <!-- end game screen -->

            <!-- pause screen -->
            <div class="pause-screen" id="pause-screen">
                <div class="btn btn-blue" id="btn-resume">Resume</div>
                <div class="btn" id="btn-new-game">New game</div>
            </div>
            <!-- end pause screen -->

            <!-- result screen -->
            <div class="result-screen" id="result-screen">
                <div class="congrate">Competed</div>
                <div class="info">Time</div>
                <div id="result-time"></div>
                <div class="btn" id="btn-new-game-2">New game</div>
            </div>
            <!-- end result screen -->
        </div>
    </div>
    <!-- end main -->

    <script src="static/js/constant.js"></script>
    <script src="static/js/sudoku.js"></script>
    <script src="static/js/app.js"></script>
</body>
</html>
